<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*弹出层style begin*/
        .layerBlock {
            min-width: 720px;
            max-width: 95%;
            min-height: 300px;
            background-color: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3D(-50%, -45%, 0);
            overflow: hidden;
            padding: 45px 20px;
        }
        .layerRightClose {
            width: 33px;
            height: 30px;
            line-height: 30px;
            display: block;
            position: absolute;
            top: 0px;
            right: -3px;
            text-align: center;
            font-size: 28px;
            color: #ffffff;
            background-color: #e1e1e1;
        }
        .layerContent, .layerTitle {
            width: 100%;
            text-align: center;
            font-size: 42px;
            padding: 45px 3px;
            box-sizing: border-box;
            overflow: auto;
            font-family: 微软雅黑;
        }
        .layerOptBtn {
            width: 410px;
            margin: 0 auto;
        }
        .layerOptBtn > div {
            width: 168px;
            height: 70px;
            line-height: 70px;
            float: right;
            text-align: center;
            border: 1.5px solid #cccccc;
            border-radius: 5px;
            font-size: 30px;
            font-family: 微软雅黑;
        }
        .layerOptBtn > div:nth-child(1) {
            float: left;
        }
        .layerbtn, .layerClose, .save-btn, .cancel-btn {
            cursor: pointer;
        }
        .layerbtn{
            color: #ffffff;
            background-color: #ff5d3c;
            border: 0 !important;
        }

        /*弹出层style end*/
    </style>
</head>
<body>

<script src="modules/jquery.min.js"></script>
<script>
    var utils = {
        showCoverLayer: function (param, callback, callbackClose) {

            var title = param.title ? param.title : '';
            var content = param.contentId ? param.contentId : '';
            var isNew = false;
            $('.CoverLayer').each(function (i, v) {
                if ($(v).attr('layerId') == param.id) {
                    isNew = $(v);
                }
            })
            if ($(content).length) {//判断内容元素类型，需改进
                //console.log($(content).prop('outerHTML'));
                content = $(content).clone().show().prop('outerHTML');
            }

            if (isNew) {//console.log('遮罩已存在');
                isNew.show();
                return isNew.attr('layerId');
            }

            var layer = document.createElement("div");
            var btn = "<div class='layerRightClose layerClose'>×</div><div class='layerOptBtn'><div class='layerClose'>取消</div><div class='layerbtn'>确定</div></div>";
            layer.setAttribute("layerId", param.id);
            layer.setAttribute("class", "CoverLayer " + param.id);
            layer.style.cssText = 'overflow: scroll;width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: fixed;top: 0px;left: 0px;z-index:999;filter:alpha(opacity=50)';
            layer.innerHTML = "<div class='layerBlock' id='" + param.id + "'><div class='layerTitle'>" + title + "</div><div class='layerContent' style='padding-top: 0px;font-size: 12px;'>" + content + "</div>" + btn + "</div>";
            $(layer).appendTo($('body'));

            var cb = callback;
            $('#' + param.id + ' .layerbtn').on('click', function () {
                cb();
                $(layer).hide();
            });
            var cbc = callbackClose;
            $('#' + param.id + ' .layerClose').on('click', function () {
                $(layer).hide();
                if (cbc && typeof cbc == 'function') {
                    cbc();
                }
            });

            $('.layerDiv').on('click', function (e) {
                e.stopPropagation();
            });


            return layer;
        }
    };
    utils.showCoverLayer({id: 'del', title: '确定删除此商品？'}, function () {
        console.log('确定');
    });

</script>
</body>
</html>